﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@model YaAppoint.Web.Pages.Rules.IndexModel
@await Component.InvokeAsync("MonacoEditorWidget")
@inject IPageLayout PageLayout
@{
    PageLayout.Content.Title = "规则管理";
}
<link href="~/codemirror/lib/codemirror.css" rel="stylesheet" />
<script src="~/codemirror/lib/codemirror.js"></script>
<script src="~/codemirror/mode/clike/clike.js"></script>
<script src="~/codemirror/mode/javascript/javascript.js"></script>
@section scripts
{
    <abp-script src="/Pages/Rules/Index.js"></abp-script>
}
@section styles
{
    <abp-style src="/Pages/Rules/Index.css"></abp-style>
}
<div class="content-container">
    <div id="app">
        <div class="title-container">
            <div>
                <span v-if="level===0">{{hospital}}  (全局)</span>
                <span v-else-if="level===1">{{department?department.name:''}}  (科室)</span>
                <span v-else-if="level===2">{{department?department.name:''}}-{{deviceType?deviceType.name:''}} (科室设备类型)</span>
                <span v-else>{{department?department.name:''}}-{{deviceType?deviceType.name:''}}-{{device?device.name:''}}  (设备)</span>
            </div>
        </div>
        <el-row>
            <el-col :offset="20" :span="4">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="showRuleGroupCreate" icon="el-icon-plus" size="mini" v-if="ruleGroupAddPermission">添加规则组</el-button>
                    <el-button v-on:click="showRuleCreate" icon="el-icon-plus" size="mini" v-if="ruleAddPermission">添加规则</el-button>
                </div>
            </el-col>
        </el-row>
        <hr class="line-gray" />
        <div class="container-body">
            <div class="nav-container">
                <el-tree :data="treeData" :props="defaultProps" :expand-on-click-node="false" default-expand-all :highlight-current="true" v-on:node-click="nodeClicked" node-key="id">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <i :class="data.icon"></i>
                        <a>
                            <cite>{{node.label }}</cite>
                        </a>
                    </span>
                </el-tree>
            </div>
            <div class="table-container">
                <el-table :data="tableData" size="mini" height="700" ref="ruleTable" highlight-current-row v-on:current-change="selectedGroupChange">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <div class="appoint-item-container">
                                <el-table :data="props.row.rules" :show-header="false"  empty-text="暂无规则">
                                    <el-table-column type="index" width="50" align="center">

                                    </el-table-column>
                                    <el-table-column label="名称" width="300" property="name">
                                    </el-table-column>
                                    <el-table-column label="类型" width="80" >
                                        <template slot-scope="scope">
                                            <el-tag effect="dark" size="mini" type="primary" v-if="scope.row.logicType===0">必须</el-tag>
                                            <el-tag effect="dark" size="mini" v-else type="warning">优化</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="描述"  property="description">
                                        <template slot-scope="scope">
                                            <div class="rule-description">
                                                {{scope.row.description}}
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="优先级" width="50" property="order">

                                    </el-table-column>
                                    <el-table-column label="活动" width="50">
                                        <template slot-scope="scope">
                                            <el-switch v-model="scope.row.isActive"
                                                       disabled>
                                            </el-switch>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="140" align="center" >
                                        <template slot-scope="scope">
                                            <el-button v-if="ruleEditPermission" circle size="mini" icon="el-icon-edit"   plain v-on:click="showRuleEdit(scope.row.id)" ></el-button>
                                            <el-button v-if="ruleDeletePermission" circle size="mini" icon="el-icon-delete" type="danger" plain v-on:click="deleteRule(scope.row)"></el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" width="300" property="name">
                        <template slot-scope="scope">
                            <span v-if="scope.row.rules.length===0">{{scope.row.name}}</span>
                            <el-badge v-else :value="scope.row.rules.length" type="success" >
                                <span>{{scope.row.name}}</span>
                            </el-badge>
                        </template>
                    </el-table-column>
                    <el-table-column label="描述" >
                        <template slot-scope="scope">
                            <div class="rule-description">
                                {{scope.row.description}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="优先级" width="60" property="order" align="center">

                    </el-table-column>
                    <el-table-column label="活动" width="50" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isActive"
                                       disabled>
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="140" align="left">
                        <template slot-scope="scope">
                            <el-button v-if="ruleGroupEditPermission" size="mini" icon="el-icon-edit" plain  plain v-on:click="showRuleGroupEdit(scope.row.id)"></el-button>
                            <el-button v-if="ruleGroupDeletePermission" size="mini" icon="el-icon-delete" type="danger" plain v-on:click="deleteRuleGroup(scope.row.id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!--规则组对话框-->
        <el-dialog :title="ruleGroupDialogTitle" :visible.sync="ruleGrupDialogVisible" width="700px" v-on:close="resetRuleGoupForm" :close-on-click-modal="false">
            <template v-slot:title>
                <span style="font-size:18px;font-weight:600" v-if="groupActionType==='Addd'"> 新建规则组</span>
                <span style="font-size:18px;font-weight:600" v-else> 编辑规则组</span>
                &nbsp;&nbsp; <span>(&nbsp;{{levelPathName}}&nbsp;)</span>
            </template>
            <el-form :model="ruleGroup" :label-width="groupLabelWidth" ref="ruleGroupForm" :rules="validateGroupRules">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="层级">
                                <el-select size="mini" v-model="ruleGroup.level" placeholder="请选择" style="width:100%;" disabled>
                                    <el-option v-for="item in levelOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="名   称" prop="name">
                                <el-input v-model.trim="ruleGroup.name" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="排  序" prop="order">
                                <el-input v-model.trim="ruleGroup.order" type="number" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="描   述">
                            <el-input type="textarea"
                                      :rows="2"
                                      placeholder="请输入描述"
                                      v-model="ruleGroup.description">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="活  动">
                                <el-switch v-model="ruleGroup.isActive">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="saveRuleGroup" size="mini">保存</el-button>
            </div>
        </el-dialog>


        <!--规则对话框-->
        <el-dialog class="rule-dialog" :title="ruleDialogTitle" :visible.sync="ruleDialogVisible" v-on:close="resetRuleForm" :close-on-click-modal="false" fullscreen>
            <template v-slot:title>
                <span style="font-size:18px;font-weight:600" v-if="ruleActionType==='Add'"> 新建规则</span>
                <span style="font-size:18px;font-weight:600" v-else> 编辑规则</span>
                &nbsp;&nbsp; <span>(&nbsp;{{levelPathName}}&nbsp;)</span>
            </template>
            <el-form :model="rule" :label-width="ruleLabelWidth" ref="ruleForm" :rules="validateRules">
                <div class="rule-diaolog-header">
                    <el-row>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-dark">
                                <el-form-item label="名称" prop="name">
                                    <el-input v-model.trim="rule.name" size="mini" autocomplete="off" clearable></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-dark">
                                <el-form-item label="规则组">
                                    <el-select size="mini" v-model="rule.ruleGroupId" placeholder="请选择" disabled style="width:100%;">
                                        <el-option v-for="item in ruleGroupOptions"
                                                   :key="item.value"
                                                   :label="item.label"
                                                   :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-dark">
                                <el-form-item label="层级">
                                    <el-select size="mini" v-model="rule.level" placeholder="请选择" disabled style="width:100%;">
                                        <el-option v-for="item in levelOptions"
                                                   :key="item.value"
                                                   :label="item.label"
                                                   :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <div class="grid-content bg-purple-dark">
                                <el-form-item label="类名" prop="typeName">
                                    <el-input v-model.trim="rule.typeName" size="mini" autocomplete="off" clearable></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content bg-purple-dark">
                                <el-form-item label="与/或">
                                    <el-select size="mini" v-model="rule.logicType" placeholder="请选择" style="width:100%;" disabled>
                                        <el-option v-for="item in logicTypeOptions"
                                                   :key="item.value"
                                                   :label="item.label"
                                                   :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content bg-purple-dark">
                                <el-form-item label="排  序" prop="order">
                                    <el-input v-model.trim="rule.order" type="number" size="mini" autocomplete="off" clearable></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content bg-purple-dark">
                                <el-form-item label="活动">
                                    <el-switch v-model="rule.isActive">
                                    </el-switch>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom:5px;">
                        <el-col :span="24">
                            <el-form-item label="描   述">
                                <el-input type="textarea"
                                          :rows="1"
                                          placeholder="请输入描述"
                                          v-model="rule.description">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark" >
                            <el-form-item label="内容">
                                <code-mirror v-model="rule.script" :mode="language"></code-mirror>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="saveRule" size="mini">保存</el-button>
            </div>
        </el-dialog>
    </div>
</div>